WWL.progressbar = function ( id, w, h, dir )
{
	WWL.progressbar.HORIZONTAL = 'h';
	WWL.progressbar.VERTICAL = 'v';

	var pb = new WWL ( 'progressbar', id );

	pb._dir = dir || WWL.progressbar.HORIZONTAL;

	pb.value = 0;
	pb.min_value = 0;
	pb.max_value = 100;
	pb._width = w || 200;
	pb._height = h || 24;

	/*
	pb._container = document.createElement ( 'div' );
	pb._container.className = 'progressbar-container';

	pb._bar = document.createElement ( 'div' );
	pb._bar.style.left = 0;
	pb._bar.style.bottom = 0;
	if ( pb._dir == pb.HORIZONTAL )
	{
		pb._bar.style.right = '100%';
		pb._bar.style.top = 0;
		liwe.dom.add_class ( pb._bar, 'horizontal' );
	}
	else
	{
		pb._bar.style.top = '100%';
		pb._bar.style.right = 0;
		liwe.dom.add_class ( pb._bar, 'vertical' );
	}
	liwe.dom.add_class ( pb._bar, 'progressbar-bar' );

	pb._container.appendChild ( pb._bar );

	pb._dest_div.style.position = 'relative';
	pb._dest_div.appendChild ( pb._container );
	*/

	pb.to_string = function ()
	{
		var s = '<div style="width: ' + pb._width + 'px; height: ' + pb._height + 'px" class="progressbar-container">'
			+ '<div id="' + pb.id + '" class="progressbar-bar ' + ( pb._dir == WWL.progressbar.HORIZONTAL ? 'horizontal' : 'vertical' ) + '"></div>'
			+ '</div>';
		return s;
	};

	pb.set_value = function ( v )
	{
		if ( v < pb.min_value ) v = pb.min_value;
		else if ( v > pb.max_value ) v = pb.max_value;
		pb.value = v;
		pb.render ();
	};

	pb.add = function ( v )
	{
		pb.set_value ( pb.value + v );
	};

	pb.render = function ()
	{
		var bar = $ ( pb.id );
		var ratio = Math.round ( pb.value / pb.max_value * 100 );
		if ( pb._dir == WWL.progressbar.HORIZONTAL )
		{
			bar.style.right = ( 100 - ratio ) + '%';
			bar.style.lineHeight = pb._height + 'px';
		}
		else
		{
			bar.style.top = ( 100 - ratio ) + '%';
			bar.style.lineHeight = ( pb._height / 100 * ratio ) + 'px';
		}
		bar.style.display = pb.value == pb.min_value ? 'none' : 'block';
		bar.innerHTML = ratio + '%';
	};

	return pb;
};
